import { LineLayer, PolygonLayer, Scene, CanvasLayer } from '@antv/l7'
import { Mapbox } from '@antv/l7-maps'
import { DrawRect } from '@antv/l7-draw'
import { Component, ReactNode } from 'react'
import chinaData from 'static-geo-atlas/geo-data/choropleth-data/country/100000_country_province.json'

class MyMap extends Component {
  constructor(props: { json: any }) {
    super(props)
    // 初始化state
    this.state = {
      rectDrawer: null,
    }
  }
  private scene: any = null
  async componentDidMount(): Promise<void> {
    if (this.scene) return
    const res = await init(chinaData)
    this.scene = res.scene
  }

  /*
    动态添加图层
  */
  addAndUpdateCanvasLayer = (scene: Scene, resultArr: any) => {
    const rectList: any[] = [] // 存放矩形数据的数组
    resultArr.forEach((item: any) => {
      const { minLng, minLat, maxLng, maxLat } = item
      rectList.push({
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [minLng, minLat],
              [minLng, maxLat],
              [maxLng, minLat],
              [maxLng, maxLat],
            ],
          ],
        },
      })
    })

    this.state.rectDrawer?.clear() // 清除之前绘制的矩形
    const drawer = new DrawRect(scene, {
      initialData: rectList, // 初始数据
      editable: false, // 不可编辑
    })
    this.setState(() => ({ rectDrawer: drawer }))
    drawer.disable()
  }

  componentDidUpdate(prevProps: { json: any }) {
    if (this.props.json !== prevProps.json) {
      const PolygonLayer = this.scene.getLayerByName('PolygonLayer')
      const LineLayer = this.scene.getLayerByName('LineLayer')
      PolygonLayer.setData(this.props.json) // 重新渲染平面图层
      LineLayer.setData(this.props.json) // 重新渲染线图层
      this.addAndUpdateCanvasLayer(this.scene, this.props.resultArr)
    }
  }
  render(): ReactNode {
    return (
      <div
        id="map"
        style={{
          width: '100%',
          height: '500px',
          backgroundColor: 'rgb(16, 24, 16)',
          position: 'relative',
        }}
      />
    )
  }
}

export default MyMap

const init = (data: any): { scene: any } => {
  const container = document.getElementById('map')
  const scene = new Scene({
    id: 'map', // 容器id
    logoVisible: false, // 隐藏logo
    // 地图类型
    map: new Mapbox({
      container: container,
      center: [103.1925, 37.6527], // 展示全国的中心点
      zoom: 3.88,
      style: 'blank',
      maxZoom: 20,
      minZoom: 1.8,
      pitch: 0, // 倾斜角度
    }),
  })

  return new Promise((resolve) => {
    scene.on('loaded', () => {
      const chinaPolygonLayer = new PolygonLayer({
        zIndex: 1,
        autoFit: true,
        name: 'PolygonLayer',
      })
        .source(data)
        .color('rgba(70,79,111,.8)')
        .shape('fill')
        .active(true)

      scene && scene.addLayer(chinaPolygonLayer)

      const LinLayer = new LineLayer({
        zIndex: 2,
        autoFit: true,
        name: 'LineLayer',
      })
        .source(data)
        .color('#fff')
        .active(true)
        .size(0.5)
        .shape('line')
        .color('rgba(92, 137, 165, 1)')
        .style({ opacity: 0.8, lineJoin: 'round', lineCap: 'round' })

      scene.addLayer(LinLayer)

      resolve({ scene })
    })
  })
}
